<template>
  <main-layout title="设置" :showHome="true">
    <div class="img">
      <van-uploader
        v-model="fileList"
        :deletable="false"
        :multiple="true"
        :after-read="afterRead"
      />
      <!-- :max-count="1" -->
      <div class="userName">
        {{ userInfo.name }}
      </div>
    </div>
    <div class="list">
      <ul>
        <li @click="delectUserInfo">清除缓存<i class="icon"></i></li>
        <li>版本信息<i class="icon"></i></li>
        <li>操作指南<i class="icon"></i></li>
      </ul>
      <van-button
        type="primary"
        block
        color="#ff5b02"
        @click="$router.push('/login')"
        >退出系统</van-button
      >
    </div>
  </main-layout>
</template>
<script>
import { Dialog } from "vant";
export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      sessionStorage.setItem("HEADIMG", JSON.stringify(this.fileList));
      this.fileList.splice(0, 2, this.fileList[this.fileList.length - 1]);
    },
    delectUserInfo() {
      Dialog.confirm({
        title: "清除确认",
        message: "清除消息后，需要重新登录，确定要清除？",
      })
        .then(async () => {
          sessionStorage.clear();
          localStorage.clear();
          this.$router.push("/login");
        })
        .catch(() => {});
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters["common/userInfomation"];
    },
  },
  created() {
    let headImg = JSON.parse(sessionStorage.getItem("HEADIMG"));
    if (headImg !== null) {
      this.fileList.push(headImg[headImg.length - 1]);
    }
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>